<script setup lang="ts"></script>

<template>
  <div class="patient-page">
    <cp-nav-bar title="家庭档案"> </cp-nav-bar>
    <div class="patient-list">
      <cp-card>
        <template #card-header>
          <van-row align="center">
            <van-col span="4">
              <span class="card-title">姚爱青</span>
            </van-col>
            <van-col span="16">
              <span class="card-idcard">14032119890902481X</span>
            </van-col>
            <van-col span="4">
              <van-tag type="danger">默认</van-tag>
            </van-col>
          </van-row>
        </template>
        <template #card-body>
          <van-row align="center">
            <van-col span="4">
              <span class="card-sex">男</span>
            </van-col>
            <van-col span="4">
              <span class="card-age">32岁</span>
            </van-col>
          </van-row>
        </template>
        <template #card-icon>
          <cp-icon name="user-edit" />
        </template>
      </cp-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.patient {
  &-page {
    padding: 46px 15px 0;
    // 最小高度为 100vh-46px
    min-height: calc(100vh - 50px);
  }

  &-list {
    margin-top: 15px;
  }
}
.van-row {
  flex-wrap: nowrap;
  height: 100%;
}
</style>
